<template>
  <div class="maxShow" style="background-color: #333333" align="center" >
    <el-scrollbar>
      <el-main style="padding: 0">
        <h1 style="color: #FCEE00;padding: 70px 20px 20px">媒体</h1>
        <div style="padding: 30px 20px 40px">
          <div style="height: 60px">
            <a href="https://borderlands.2k.com/zh-CN/" style="background-color: #FCEE00;margin: 25px;padding: 10px 30px"><b>《新无主之地传说》</b></a>
            <a href="https://borderlands.2k.com/zh-CN/" style="background-color: #FCEE00;margin: 25px;padding: 10px 30px"><b>《无主之地3》</b></a>
            <a href="https://borderlands.2k.com/zh-CN/" style="background-color: #FCEE00;margin: 25px;padding: 10px 30px"><b>《无主之地传说》</b></a>
          </div>
          <div style="height: 60px">
            <a href="https://borderlands.2k.com/zh-CN/" style="background-color: #FCEE00;margin: 25px;padding: 10px 30px"><b>《无主之地:前传》</b></a>
            <a href="https://borderlands.2k.com/zh-CN/" style="background-color: #FCEE00;margin: 25px;padding: 10px 30px"><b>《无主之地2》</b></a>
            <a href="https://borderlands.2k.com/zh-CN/" style="background-color: #FCEE00;margin: 25px;padding: 10px 30px"><b>《无主之地》</b></a>
          </div>
        </div>

        <div class="main_hr" style="height: 30px"></div>
        <h1 style="color: #FCEE00;padding: 30px 20px 20px;">《新无主之地传说》</h1>

        <div class="main_part" style="padding: 20px 20px 40px" >
          <div style="width: 620px">
            <el-row :gutter="10" v-for="item in 1" >
              <el-col :span="8" v-for="p in imgGroup1">
                <img :src="p.imgUrl" width="200" style="padding: 3px">
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="main_hr" style="height: 30px"></div>
        <h1 style="color: #FCEE00;padding: 30px 20px 20px;">《无主之地3》</h1>

        <div class="main_part" style="padding: 20px 20px 40px" >
          <div style="width: 620px">
            <el-row :gutter="10" v-for="item in 1" >
              <el-col :span="8" v-for="p in imgGroup2">
                <img :src="p.imgUrl" width="200" style="padding: 3px">
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="main_hr" style="height: 30px"></div>
        <h1 style="color: #FCEE00;padding: 30px 20px 20px;">《无主之地传说》</h1>

        <div class="main_part" style="padding: 20px 20px 40px" >
          <div style="width: 620px">
            <el-row :gutter="10" v-for="item in 1" >
              <el-col :span="8" v-for="p in imgGroup3">
                <img :src="p.imgUrl" width="200" style="padding: 3px">
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="main_hr" style="height: 30px"></div>
        <h1 style="color: #FCEE00;padding: 30px 20px 20px;">《无主之地:前传》</h1>

        <div class="main_part" style="padding: 20px 20px 40px" >
          <div style="width: 620px">
            <el-row :gutter="10" v-for="item in 1" >
              <el-col :span="8" v-for="p in imgGroup4">
                <img :src="p.imgUrl" width="200" style="padding: 3px">
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="main_hr" style="height: 30px"></div>
        <h1 style="color: #FCEE00;padding: 30px 20px 20px;">《无主之地2》</h1>

        <div class="main_part" style="padding: 20px 20px 40px" >
          <div style="width: 620px">
            <el-row :gutter="10" v-for="item in 1" >
              <el-col :span="8" v-for="p in imgGroup5">
                <img :src="p.imgUrl" width="200" style="padding: 3px">
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="main_hr" style="height: 30px"></div>
        <h1 style="color: #FCEE00;padding: 30px 20px 20px;">《无主之地》</h1>

        <div class="main_part" style="padding: 20px 20px 40px" >
          <div style="width: 620px">
            <el-row :gutter="10" v-for="item in 1" >
              <el-col :span="8" v-for="p in imgGroup6">
                <img :src="p.imgUrl" width="200" style="padding: 3px">
              </el-col>
            </el-row>
          </div>
        </div>
        <img src="imgs/16.png" width="100%">
        <div class="fot">
          <img src="imgs/17.svg" width="50" height="50px" class="fotimg" style="margin-left: 20px">
          <img src="imgs/18.svg" width="50" height="50px" class="fotimg">
          <img src="imgs/19.svg" width="50" height="50px" class="fotimg">
          <img src="imgs/20.svg" width="50" height="50px" class="fotimg">
          <img src="imgs/21.svg" width="50" height="50px" class="fotimg" style="margin-right: 0">
        </div>
        <div class="fot2" style="margin-bottom: 30px">
          <img src="imgs/22.webp" width="100px" style="margin-right: 20px;margin-left: 10px">
          <img src="imgs/23.webp" width="100px" style="margin-right: 0px">
        </div>
        <div style="background-color: black;height: 700px">
          <div style="color: white;text-align: center" class="fott" >
            <ul >
              <li style="margin-left: 20px">隐私权政策</li>
              <li>服务条款</li>
              <li>COOKIE条款</li>
              <li>COOKIE 2K广告合作伙伴</li>
            </ul>
          </div>

          <div style="color: white;text-align: center;margin-top: 20px" class="fotbot" >
            <ul >
              <li >太原学府中学</li>
              <li>项目经理：吴林峰</li>
              <li>班主任：张雨</li>
              <li>小组成员：陈子冬、常浩东、李旋、朱钰灏</li>
            </ul>
          </div>
        </div>
      </el-main>
    </el-scrollbar>
  </div>
</template>


<script setup>
  import {ref} from "vue";

  const imgGroup1= ref([
    {imgUrl:'imgs/meiti/item1/1.jpg'},
    {imgUrl:'imgs/meiti/item1/2.jpg'},
    {imgUrl:'imgs/meiti/item1/3.jpg'},
    {imgUrl:'imgs/meiti/item1/4.jpg'},
    {imgUrl:'imgs/meiti/item1/5.jpg'},
    {imgUrl:'imgs/meiti/item1/6.jpg'}
  ]);

  const imgGroup2 = ref([
    {imgUrl:'imgs/meiti/item2/1.jpg'},
    {imgUrl:'imgs/meiti/item2/2.jpg'},
    {imgUrl:'imgs/meiti/item2/3.jpg'},
    {imgUrl:'imgs/meiti/item2/4.jpg'},
    {imgUrl:'imgs/meiti/item2/5.jpg'},
    {imgUrl:'imgs/meiti/item2/6.jpg'},
    {imgUrl:'imgs/meiti/item2/7.jpg'},
    {imgUrl:'imgs/meiti/item2/8.jpg'},
    {imgUrl:'imgs/meiti/item2/6.jpg'}
  ]);
  const imgGroup3 = ref([
    {imgUrl:'imgs/meiti/item3/1.jpg'},
    {imgUrl:'imgs/meiti/item3/2.jpg'},
    {imgUrl:'imgs/meiti/item3/3.jpg'},
    {imgUrl:'imgs/meiti/item3/4.jpg'},
    {imgUrl:'imgs/meiti/item3/5.jpg'},
    {imgUrl:'imgs/meiti/item3/6.jpg'}
  ]);
  const imgGroup4 = ref([
    {imgUrl:'imgs/meiti/item4/1.jpg'},
    {imgUrl:'imgs/meiti/item4/2.jpg'},
    {imgUrl:'imgs/meiti/item4/3.jpg'},
    {imgUrl:'imgs/meiti/item4/4.jpg'},
    {imgUrl:'imgs/meiti/item4/5.jpg'},
    {imgUrl:'imgs/meiti/item4/6.jpg'},
    {imgUrl:'imgs/meiti/item4/7.jpg'},
    {imgUrl:'imgs/meiti/item4/8.jpg'},
    {imgUrl:'imgs/meiti/item4/6.jpg'}
  ]);
  const imgGroup5 = ref([
    {imgUrl:'imgs/meiti/item5/1.jpg'},
    {imgUrl:'imgs/meiti/item5/2.jpg'},
    {imgUrl:'imgs/meiti/item5/3.jpg'},
    {imgUrl:'imgs/meiti/item5/4.jpg'},
    {imgUrl:'imgs/meiti/item5/5.jpg'},
    {imgUrl:'imgs/meiti/item5/6.jpg'},
    {imgUrl:'imgs/meiti/item5/7.jpg'},
    {imgUrl:'imgs/meiti/item5/8.jpg'},
    {imgUrl:'imgs/meiti/item5/6.jpg'}
  ]);
  const imgGroup6 = ref([
    {imgUrl:'imgs/meiti/item6/1.jpg'},
    {imgUrl:'imgs/meiti/item6/2.jpg'},
    {imgUrl:'imgs/meiti/item6/3.jpg'},
    {imgUrl:'imgs/meiti/item6/4.jpg'},
    {imgUrl:'imgs/meiti/item6/5.jpg'},
    {imgUrl:'imgs/meiti/item6/6.jpg'},
    {imgUrl:'imgs/meiti/item6/7.jpg'},
    {imgUrl:'imgs/meiti/item6/8.jpg'},
    {imgUrl:'imgs/meiti/item6/6.jpg'}
  ]);

</script>


<style scoped>
  .maxShow{
    height: 100%;
    width: 100%;
    left: 0;
    border-color: black;
    position: fixed;


  }
  .maxShow::-webkit-scrollbar-thumb {
    background-color: black;
    border-radius: 10px;
    -webkit-box-shadow: inset 1px 1px 0 black;
  }
  a{
    text-decoration: none;

  }
  a:visited{
    color: black;
  }
  a:hover {
    background: white;

  }
  .main_hr{
    background-image: url('../../public/imgs/meiti/hr/p_hr.png');
  }
  .main_part{
    height: 100%;
    display: flex;
    justify-content: center;
  }
</style>